<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div{width: 100px;height: 100px;background-color: red;position: absolute;}
	</style>
</head>
<body>
	<div></div>
</body>
<script type="text/javascript">
var redDiv = document.getElementsByTagName("div")[0];
var kLeft = false;
var kTop = false;
var kBottom = false;
var kRight = false;
document.onkeydown = function(ev){
	var keyCode = ev.keyCode;
	if (keyCode == 37) {kLeft = true;}
	if (keyCode == 38) {kTop = true;}
	if (keyCode == 39) {kRight = true;}
	if (keyCode == 40) {kBottom = true;}
}
document.onkeyup = function(ev){
	var keyCode = ev.keyCode;
	if (keyCode == 37) {kLeft = false;}
	if (keyCode == 38) {kTop = false;}
	if (keyCode == 39) {kRight = false;}
	if (keyCode == 40) {kBottom = false;}
}
setInterval(function(){
	var x = redDiv.style.left;
	var y = redDiv.style.top;
	var speed = 10;
	if (kLeft) {x-=speed;}
	if (kTop) {y-=speed;}
	if (kRight) {x+=speed;}
	if (kBottom) {y+=speed;}
	redDiv.style.left = x + "px";
	redDiv.style.top = y + "px";
},20)
</script>
</html>